<template>
  <div id="app">
    <keep-alive include="Home">
      <!-- 切换页面时，它将页面所对应组件使用v-show,以前使用的是v-if -->
      <!-- 只缓存 video
         1:video加入name
         2:keep-alive  include="video的name"
        除了video其它页面都缓存
         1:video加入name
         2:keep-alive  exclude="video的name"
         一般也就是像新闻列表这种页面
       -->
      <RouterView class="body" />
    </keep-alive>
    <RouterView class="footer" name="bottom" />
  </div>
</template>
<script>
export default {
  watch: {
    $route: {
      handler () {
        // console.log('watch了')
      }
    }
  }
}
</script>
<style lang="less" scoped>
#app {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .body {
    flex: 1;
    overflow: hidden;
  }
  .footer {
    height: 50px;
  }
}
.test {
  background: @geek-color;
  // .xxx(200px);
}
</style>
